import React, { Component } from 'react';
import { connect } from 'react-redux';
import CustomForm from '../../../components/CustomForm';
import { Input, message, TreeSelect } from 'antd';
import services from '../../../services/api';
import { compare } from '../../../utils/compare';

const { TreeNode } = TreeSelect;

@connect()
class DeptAdd extends Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: props.deptTree
    };
    this.actionType = props.actionType || 'add';
    this.form = null;
    this.api = 'dept';
  }

  componentDidMount() {
  }

  handleSubmit = () => {
    this.form.validateFields((err, values) => {
      if (!err) {
        const params = {
          dept_name: values.dept_name,
          parent_code: values.parent_code,
          manager: values.manager,
          remark: values.remark
        };
        if (this.actionType === 'update') {
          params.dept_id = this.props.record.dept_id
        } else {
          params.dept_code = values.dept_code
        }
        services[this.api][this.actionType](params).then(data => {
          if (data.code === 0) {
            message.success('操作成功');
            this.props.dispatch({ type: 'global/queryDept', data: {} });
            if (this.props.closeModal) {
              this.props.closeModal();
            }
          } else {
            message.error(data.msg);
          }
        });
      }
    });
  };

  TreeNodeRender = (parent) => {
    return parent.map((item) =>
      item.child && item.child.length > 0 ? (
        <TreeNode value={item.dept_code || -1} title={item.dept_name} key={item.dept_code || -1}>
          {this.TreeNodeRender(item.child)}
        </TreeNode>
      ) : (
        <TreeNode value={item.dept_code} title={item.dept_name} key={item.dept_code} />
      )
    );
  };

  render() {
    console.log(this.actionType)
    const { dept_name, dept_code, parent_code, manager, remark } = this.props.record || {};

    const formItems = [
      {
        label: {
          label: '部门名称',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'dept_name',
        options: {
          initialValue: dept_name,
          rules: [
            { required: true, message: '请输入部门名称' },
            { max: 128, message: '最长128个字符' },
            { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' }
          ]
        },
        component: <Input
          placeholder='部门名称'
          style={compare(this.props, 'event_name')}
        />
      },
      {
        label: {
          label: '部门代码',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'dept_code',
        options: {
          initialValue: dept_code,
          rules: [
            { required: true, message: '请输入部门代码' },
            { max: 128, message: '最长128个字符' },
            { pattern: /^[a-zA-Z][_a-zA-Z0-9]*$/, message: '限英文数字下划线，并以英文开头' }
          ]
        },
        component: <Input
          placeholder='部门代码'
          style={compare(this.props, 'dept_code')}
          disabled={this.actionType !== 'add'}
        />
      },
      {
        label: {
          label: '上级部门',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap',
        },
        name: 'parent_code',
        options: {
          initialValue: parent_code || -1,
          rules: [
            { required: true, message: '请选择上级部门' },
          ]
        },
        component: (
          <TreeSelect
            style={{ ...{ width: '100%' }, ...compare(this.props, 'parent_code') }}
            placeholder='请选择'
            disabled={this.actionType !== 'add'}
            showSearch
            treeNodeFilterProp='title'
            dropdownStyle={{ maxHeight: 400 }}
          >
            {this.TreeNodeRender(this.state.treeData)}
          </TreeSelect>
        ),
      },
      {
        label: {
          label: '负责人名字',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'manager',
        options: {
          initialValue: manager,
          rules: [
            { max: 128, message: '最长128个字符' },
            { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' }
          ]
        },
        component: <Input
          placeholder='负责人名字'
          style={compare(this.props, 'manager')}
        />
      },
      {
        label: {
          label: '描述',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap',
        },
        name: 'remark',
        options: {
          initialValue: remark,
          rules: [
            { max: 256, message: '最长256个字符' },
          ],
        },
        component: (
          <Input.TextArea
            style={compare(this.props, 'remark')}
            placeholder='请输入'
          />
        ),
      },
    ];

    return (
      <CustomForm
        {...this.props}
        closeModal={this.props.closeModal}
        createForm={ref => (this.form = ref)}
        formItems={formItems}
        onHandleSubmit={this.handleSubmit}
        colNum={1}
      />
    );
  }
}
export default DeptAdd;
